import * as React from "react";
import { Component } from "react";
import { Button, DatePicker } from "antd";
import IconFont from "../../../../assets/ICON";
import "./index.less";
const DatePickers:any= DatePicker;
export interface ScreenProps {}

export interface ScreenState {
  type: Number;
  time: "date" | "time" | "month" | "year" | "week" | "quarter";
}
export enum dateEnum {
  "date" = "date",
  "time" = "time",
  "month" = "month",
  "year" = "year",
}
class Screen extends Component<ScreenProps, ScreenState> {
  state = {
    type: 1,
    time: dateEnum.date,
  };
  render() {
    let { type, time } = this.state;
    return (
      <>
        <div className="rowcon_body">
          <div className="changeType_btn f-left">
            <Button
              className="left"
              type={type === 1 ? "primary" : "default"}
              icon={<IconFont type="icon_dian" />}
              onClick={() => {
                this.setState({ type: 1 });
              }}
            >
              电
            </Button>
            <Button
              className="right"
              type={type === 2 ? "primary" : "default"}
              icon={<IconFont type="icon_shui" />}
              onClick={() => {
                this.setState({ type: 2 });
              }}
            >
              水
            </Button>
          </div>
          <div className="changeType_btn f-left">
            时间粒度：
            <Button
              className="left"
              type={time === "date" ? "primary" : "default"}
              onClick={() => {
                this.setState({ time: "date" });
              }}
            >
              日
            </Button>
            <Button
              className="center"
              type={time === "month" ? "primary" : "default"}
              onClick={() => {
                this.setState({ time: "month" });
              }}
            >
              月
            </Button>
            <Button
              className="right"
              type={time === "year" ? "primary" : "default"}
              onClick={() => {
                this.setState({ time: "year" });
              }}
            >
              年
            </Button>
          </div>
          <div className="changeType_btn f-left">
            时间筛选：
            <DatePickers allowClear={false} picker={time} />
          </div>
          <div className="clear"></div>
        </div>
      </>
    );
  }
}

export default Screen;
